import React from 'react';
import { Avatar, Row } from 'antd';
import styles from './index.less';

const ChannelListItem = ({ avatar, avatarStyle, title, titleExtra, content, extra, footer, disabled, ...rest }) => (
    <div className={styles.itemWrap} {...rest}>
        <div className={styles.item}>
            <Avatar
                shape="square"
                size={52}
                src={avatar}
                style={{ marginRight: 24, flexShrink: 0, opacity: disabled ? 0.5 : 1, ...avatarStyle }}
            />
            <div style={{ flex: 1 }}>
                <Row type="flex" justify="space-between" style={{ marginBottom: 6 }}>
                    <div style={{ opacity: disabled ? 0.5 : 1, flex: 1 }}>{title}</div>
                    {titleExtra && <div style={{ marginLeft: 16, flexShrink: 0 }}>{titleExtra}</div>}
                </Row>
                {content && <div style={{ opacity: disabled ? 0.5 : 1, flex: 1 }}>{content}</div>}
            </div>
            {extra && <div style={{ marginLeft: 16, flexShrink: 0 }}>{extra}</div>}
        </div>
        {footer}
    </div>
);

export default ChannelListItem;
